<template>
	<a-config-provider :locale="locale">
		<div id="app">
			<Header :curPage="curPage" />
			<div class="main">
				<div class="sidebar" v-if="isShowSidebar">
					<Sidebar :curPage="curPage" />
				</div>
				<div class="content">
					<router-view />
				</div>
			</div>
		</div>
	</a-config-provider>
</template>

<script lang="ts">
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { Component, Vue, Watch } from 'vue-property-decorator'
import Header from '@/layout/components/menubar/index.vue'
import Sidebar from '@/layout/components/sidebar/index.vue'
import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
// import { namespace } from 'vuex-class'
// const userRoleModule = namespace('userRole')
// import {UserRoleModule} from '@/store/modules/userRole'
@Component({
	components: {
		Header,
		Sidebar,
		Breadcrumb
	}
})
export default class App extends Vue {
//   @userRoleModule.State('routers') private routers!: []
	private locale: any = zhCN
	private curPage = '/behavioural/events'
	private oldPage!: string
	private Router = '/datamanagement/segmentation'
	@Watch('$route', { deep: true })
	private onRouteChange(to: any, from: any) {
		this.curPage = to.path
		this.oldPage = from.path
	}
	get key(): any {
		return this.$route.path
	}
	get isShowSidebar() {
		return this.$route?.meta?.sidebar
	}
	created(): void {
		this.curPage = this.$route.path
		localStorage.setItem('productId', '125')
		// if (!localStorage.getItem('productId')) {
		// 	localStorage.setItem('projectId', '125')
		// }
		debugger
	}
}
</script>

<style lang="scss">
#app {
	height: 100%;
	.main {
		display: flex;
		justify-content: space-between;
		height: calc(100vh - 64px);
	}
	.sidebar {
		overflow-y: overlay;
		box-sizing: content-box;
		width: 80px;
		height: 100%;
		border-right: 1px solid #e8e8e8;
		background: #fff;
		z-index: 1;
		position: relative;
		left: 0;
		top: 0;
		box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px 0px;
		@include scrollBar;
	}
	.content {
		overflow: hidden;
		flex: 1;
	}
}
.eq-icon {
	width: 40px;
	height: 40px;
	text-align: center;
}
</style>
